<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018-12-20
  Time: 下午 4:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="../../js/cookie/jquery.cookie.js" charset="utf-8"></script>
    <script src="../../layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
    <script src="/js/layui/form_verify.js"></script>
    <link rel="stylesheet" href="../../layui-v2.4.5/layui/css/layui.css" media="all">
</head>
<body>

<div id="ajaxData" style="height: 200px;width: 300px">

</div>
<script>
    var carousel;
    function loadImg(){
        $.ajax({
            url:'/shop/slideshowImgs?commodityId=${commodityId}',
            type:'POST', //GET
            async:true,    //或false,是否异步
            timeout:5000,    //超时时间
            dataType:'html',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                console.log('发送前')*/
            },
            success:function(data){
                //console.log(data);
                $("#ajaxData").empty();
                $("#ajaxData").append(data);

                //图片轮播
                carousel.render({
                    elem: '#test10'
                    ,width: '100%'
                    ,height: '100%'
                    ,interval: 5000
                });


            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        })
    }
    $(function () {
        loadImg();
    });


</script>

<script>
    layui.use('element', function(){
        var element = layui.element;
    });


    layui.use(['carousel', 'form'], function(){
        carousel = layui.carousel;
        var form = layui.form;

    });
</script>

<div>
    <button class="layui-btn layui-btn-danger" onclick="loadImg()" >刷新轮播图</button>
    <text> 鼠标点击对应的图片设置轮播顺序或者删除图片 </text>
</div>
<script>
    function delAllImg(){
        $.ajax({
            url:'/shop/delAllImg',
            type:'POST', //GET
            async:true,    //或false,是否异步
            data:{
                commodityId:'${commodityId}',
            },
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                console.log('发送前')*/
            },
            success:function(data){
                window.location.replace(location.href);
            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        })
    }

</script>
<br>
<div>
    <button class="layui-btn layui-btn-normal" onclick="delAllImg()">删除全部轮播图</button>
    <a href="javascript:location.replace(location.href);" class="layui-btn">刷新当前页面</a>
</div>





<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>新图片上传</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>


<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        <%--//选完文件后不自动上传--%>
        <%--upload.render({--%>
            <%--elem: '#test8'--%>
            <%--,url: '/shop/slideshowUpload?commodityId=${commodityId}'--%>
            <%--,auto: false--%>
            <%--//,multiple: true--%>
            <%--,bindAction: '#test9'--%>
            <%--,done: function(res){--%>
                <%--console.log(res)--%>
            <%--}--%>
        <%--});--%>


        //多文件列表示例
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: '/shop/slideshowUpload?commodityId=${commodityId}'
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                console.log("上传结果为："+res)
                if(res== 0){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    console.log("图片上传成功，刷新页面");
                    loadImg();
                    return delete this.files[index]; //删除文件队列已经上传成功的文件

                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });



    });
</script>




</body>
</html>
